import { Tabs, Empty, Divider, Tag,Button } from 'antd-mobile'
import "@/css/vender/order/orderIndex.css"
//商户的订单页面
const VOrder = () => {
    return <div className='VOrderIndex'>
        <Tabs className='nav-tabs' activeLineMode="fixed">
            <Tabs.Tab title='未发货' key='fruits'>
                {/* <Empty
                    style={{ padding: '64px 0' }}
                    imageStyle={{ width: 128 }}
                    description='暂无数据'
                /> */}

                <div className='finishOrders'>
                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p><Tag color='warning'>未发货</Tag></p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    {/* <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p> */}
                                    <div style={{height:"30px"}}></div>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Button style={{height:"25px",width:"66px",fontSize:10}} color='success' size='mini'>发货</Button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p><Tag color='warning'>未发货</Tag></p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    {/* <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p> */}
                                    <div style={{height:"30px"}}></div>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Button style={{height:"25px",width:"66px",fontSize:10}} color='success' size='mini'>发货</Button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    
                </div>

            </Tabs.Tab>



            <Tabs.Tab title='已发货' key='vegetables'>
            <div className='finishOrders'>
                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p><Tag color='warning'>未发货</Tag></p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    {/* <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p> */}
                                    <div style={{height:"30px"}}></div>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Button style={{height:"25px",width:"66px",fontSize:10}} color='success' size='mini'>发货</Button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p>已发货</p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    {/* <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p> */}
                                    <div style={{height:"30px"}}>  <Tag color='warning'>未发货</Tag></div>
                                    <p>
                                  
                                    </p>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Button style={{height:"25px",width:"66px",fontSize:10}} color='success' size='mini'>取消发货</Button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    
                </div>
            </Tabs.Tab>

            <Tabs.Tab title='已完成' key='animals'>
                <div className='finishOrders'>
                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p>已完成</p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                {/* <p>￥400</p>
                            <p>X4</p>
                            <p>￥400</p> */}
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Tag color='success'>订单已完成</Tag>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>





                    <div className='finishOrder'>
                        <div className='orderHead'>
                            <p>罗顶级柳州螺蛳粉</p>
                            <p>已完成</p>
                        </div>

                        <div className='divider'></div>

                        <div className='orderDetail'>
                            <div className='shop-left'>
                                <div className='shop-img-box'>
                                    <img src={require(`@/assets/imgs/shop${1}.jpg`)} alt='' className='shop-img' />
                                </div>

                                <div className='shop-remark'>
                                    <p>鸡爪</p>
                                    <p>10斤 | ±0.5斤</p>
                                    <p>收货数量:2,收货金额:¥100</p>
                                    <p>2024-01-18 15:31:16</p>
                                </div>
                            </div>
                            <div className='shop-right'>
                                {/* <p>￥400</p>
                            <p>X4</p>
                            <p>￥400</p> */}
                                <div className='shop-right-info'>
                                    <div>￥400</div>
                                    <div>X4</div>
                                    <div>
                                        <Tag color='success'>订单已完成</Tag>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </Tabs.Tab>
        </Tabs>
    </div>
}

export default VOrder